<template>
  <article-templates :data="articleData">
    <template #article>
      <n-row gutter="20">
        <n-col :span="12">
          <div>
            <span class="font-medium"> 连接状态: </span>
            <n-tag :type="getTagColor">{{ status }}</n-tag>
          </div>
          <hr class="my-4" />

          <div class="flex">
            <n-input-group>
              <n-input-group-label style="width:100px;"> 服务地址 </n-input-group-label>
              <n-input v-model:value="server" disabled />
            </n-input-group>
            <n-button :type="getIsOpen ? 'error' : 'primary'" @click="toggle">
              {{ getIsOpen ? '关闭连接' : '开启连接' }}
            </n-button>
          </div>
          <p class="font-medium">设置</p>
          <hr class="my-4" />

          <n-input
            type="textarea"
            placeholder="需要发送到服务器的内容"
            :disabled="!getIsOpen"
            v-model:value="sendValue"
            allowClear
          />

          <n-button
            type="primary"
            block
            class="mt-4"
            :disabled="!getIsOpen"
            @click="handlerSend"
          >
            发送
          </n-button>
        </n-col>

        <n-col :span="12">
          <span class="font-medium"> 消息记录: </span>
          <hr class="my-4" />

          <div>
            <ul>
              <li class="item-li" v-for="item in getList" :key="item.time">
                <div class="flex">
                  <span class="font-medium">收到消息:</span>
                  <span>{{ parseTime(item.time) }}</span>
                </div>
                <div class="item-box">
                  {{ item.res }}
                </div>
              </li>
            </ul>
          </div>
        </n-col>
      </n-row>
    </template>
  </article-templates>
</template>
<script setup>
import { reactive, watchEffect, computed, toRefs, onMounted } from 'vue';
import { postToolDetail } from '@/api/home.js';
import { parseTime } from "@/utils"
import { useWebSocket } from '@vueuse/core';
import ArticleTemplates from '@/components/ArticleTemplates/index.vue';

const server = ref('ws://111.1.139.124:10444/websocket/001');
const sendValue = ref('');
const recordList = ref([]);

const data1 = reactive({
  articleData: {},
});
const { articleData } = toRefs(data1);

const { status, data, send, close, open } = useWebSocket(server.value, {
  autoReconnect: false,
  heartbeat: true,
});
watchEffect(() => {
  if (data.value) {
    recordList.value.push({
      res: data.value,
      id: Math.ceil(Math.random() * 1000),
      time: new Date().getTime(),
    });
  }
});
const getIsOpen = computed(() => status.value === 'OPEN');
const getTagColor = computed(() => (getIsOpen.value ? 'success' : 'error'));

const getList = computed(() => {
  return [...recordList.value].reverse();
});

const handlerSend = () => {
  send(sendValue.value);
  sendValue.value = '';
}

const toggle = () => {
  if (getIsOpen.value) {
    close();
  } else {
    open();
  }
}
const getTitle = () => {
  postToolDetail({
    route: 'Ws',
  }).then((res) => {
    articleData.value = res.data;
  });
}

onMounted(() => {
  getTitle();
})
</script>

<style lang="scss" scoped>
li {
  list-style: none;
}
.flex {
  display: flex;
  align-items: center;
}
.font-medium {
  font-size: 18px;
  font-weight: 500;
}
.item-li {
  box-sizing: border-box;
  width: 100%;
}
.item-box {
  width:100%;
  word-wrap: break-word;
  word-break: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
</style>
